<template>
  <BasicDrawer
    v-bind="$attrs"
    title="查看订单详情"
    cancelText="关闭"
    :showOkBtn="false"
    showFooter
    @register="orederRegister"
    @close="drawerReset"
    :closable="false"
    isDetail
  >
    <div class="drawer-order">
      <div class="order-header">
        <div class="header-img">
          <a-image
            height="100%"
            v-if="drawerInfo.record.packageList && drawerInfo.record.packageList.length"
            :src="drawerInfo.record.packageList[0].packageIconKey"
          />
        </div>
        <div class="header-content">
          <div class="content-title">
            <EllipsisTooltip :title="drawerInfo.record.packageName">
              {{ drawerInfo.record.packageName }}
            </EllipsisTooltip>
          </div>
          <div class="content-name">
            <a-descriptions layout="vertical" :colon="false">
              <a-descriptions-item label="企业名称">{{ drawerInfo.record.enterprise }}</a-descriptions-item>
              <a-descriptions-item label="创建人姓名">{{ drawerInfo.record.createBy }}</a-descriptions-item>
            </a-descriptions>
          </div>
          <div class="content-img">
            <img v-if="drawerInfo.record.orderStatus == 1" :src="waitPayImg" />
            <img v-else-if="drawerInfo.record.orderStatus == 2" :src="finishPayImg" />
            <img v-else-if="drawerInfo.record.orderStatus == 3" :src="closePayImg" />
            <img v-else-if="drawerInfo.record.orderStatus == 4" :src="cancelPayImg" />
          </div>
        </div>
      </div>
      <div class="order-detail">
        <div class="global-drawer-title">产品详情</div>
        <div class="detail-desc">
          <a-descriptions bordered size="small">
            <a-descriptions-item label="订单编号">{{ drawerInfo.record.orderNo }}</a-descriptions-item>
            <a-descriptions-item label="订单金额">{{ formatMoney(drawerInfo.record.orderAmt) }}</a-descriptions-item>
            <a-descriptions-item label="缴费类型">
              <span v-if="drawerInfo.record.payType == 1">首次开通</span>
              <span v-else-if="drawerInfo.record.payType == 2">续费</span>
            </a-descriptions-item>
            <a-descriptions-item label="提交时间">{{ drawerInfo.record.createTime }}</a-descriptions-item>
            <a-descriptions-item label="付款时间">{{ drawerInfo.record.payTime }}</a-descriptions-item>
            <a-descriptions-item label="支付方式">
              <span v-if="drawerInfo.record.payMethod == 1">线上支付</span>
              <span v-else-if="drawerInfo.record.payMethod == 2">线下支付</span>
              <span v-else-if="drawerInfo.record.payMethod == 3">试用</span>
            </a-descriptions-item>
            <template v-if="drawerInfo.record.tryFlag === 3">
              <a-descriptions-item label="退单时间">{{ drawerInfo.record.chargebackTime }}</a-descriptions-item>
              <a-descriptions-item label="原订单编码">{{ drawerInfo.record.oldOrderNo }}</a-descriptions-item>
            </template>
            <a-descriptions-item label="备注">{{ drawerInfo.record.remark || '--' }}</a-descriptions-item>
            <a-descriptions-item label="订购企业" :span="3">{{ drawerInfo.record.enterprise }}</a-descriptions-item>
          </a-descriptions>
        </div>
      </div>
      <div class="order-detail">
        <div class="global-drawer-title">服务信息</div>
        <div class="detail-table">
          <a-table
            :scroll="{ y: 360 }"
            :columns="packageColumns"
            :dataSource="drawerInfo.record.packageList || []"
            :pagination="false"
          >
            <template #bodyCell="{ column, record, index }">
              <template v-if="column.dataIndex === 'index'">
                {{ index + 1 }}
              </template>
              <template v-else-if="column.dataIndex === 'serviceDuration'">
                {{ record.serviceDuration > 5000 ? '免费试用中' : record.serviceDuration + '天' }}
              </template>
              <template v-else-if="column.dataIndex === 'goodsName'">
                <EllipsisTooltip :title="record.goodsName">
                  {{ record.goodsName }}
                </EllipsisTooltip>
              </template>
              <template v-else-if="column.dataIndex === 'quantity'">
                {{ record.quantity || '--' }}
              </template>
            </template>
          </a-table>
        </div>
      </div>
      <div class="order-detail">
        <div class="global-drawer-title">操作记录</div>
        <div class="detail-table">
          <a-table :columns="orderColumns" :dataSource="drawerInfo.record.operationList || []" :pagination="false">
            <template #bodyCell="{ column, record, index }">
              <template v-if="column.dataIndex === 'index'">
                {{ index + 1 }}
              </template>
              <template v-else-if="column.dataIndex === 'orderStatus'">
                <span class="global-wait-status" v-if="record.orderStatus == 1">待付款</span>
                <span class="global-active-status" v-else-if="record.orderStatus == 2">已完成</span>
                <span class="global-stop-status" v-else-if="record.orderStatus == 3">已关闭</span>
                <span class="global-error-status" v-else-if="record.orderStatus == 4">已失效</span>
              </template>
              <template v-else-if="column.dataIndex === 'orderOperatorType'">
                <span v-if="record.orderOperatorType == 1">租户</span>
                <span v-else-if="record.orderOperatorType == 2">后台管理员</span>
                <span v-else-if="record.orderOperatorType == 3">管理员</span>
              </template>
              <template v-else-if="column.dataIndex === 'operation'">
                <span v-if="record.operation == 1">创建订单</span>
                <span v-else-if="record.operation == 2">在线支付</span>
                <span v-else-if="record.operation == 3">线下支付</span>
                <span v-else-if="record.operation == 4">关闭订单</span>
                <span v-else-if="record.operation == 5">订单退回</span>
                <span v-else-if="record.operation == 6">套餐试用</span>
                <span v-else-if="record.operation == 7">套餐正式</span>
              </template>
              <template v-else-if="column.dataIndex === 'operationPlatform'">
                <span v-if="record.operationPlatform == 'saas'">saas平台</span>
                <span v-else-if="record.operationPlatform == 'portal'">企业工作台</span>
                <span v-else-if="record.operationPlatform == 'online'">在线平台</span>
              </template>
            </template>
          </a-table>
        </div>
      </div>
    </div>
    <template #insertFooter>
      <a-button
        type="primary"
        v-auth="permissionCodeMap.orderCancel"
        v-if="drawerInfo.record.orderStatus === 2 && drawerInfo.record.tryFlag === 2"
        @click="cancelOrder"
        :loading="cancelLoading"
      >
        订单退回
      </a-button>
    </template>
  </BasicDrawer>
</template>

<script lang="ts" setup>
import { reactive, ref, computed, unref, createVNode } from 'vue'
import { BasicDrawer, useDrawerInner } from '@/components/Drawer'
import { permissionCodeMap } from '@/utils/permissionCodeMap'
import { message, Modal } from 'ant-design-vue'
import EllipsisTooltip from '@/components/EllipsisTooltip/index.vue'
import { cloneDeep } from 'lodash-es'
import api from '@/api'
import { formatMoney } from '@/utils/index'
import waitPayImg from '@/assets/images/waitPay.png'
import closePayImg from '@/assets/images/closePay.png'
import finishPayImg from '@/assets/images/finishPay.png'
import cancelPayImg from '@/assets/images/canceled.png'

const { orderDetail, orderCancel } = api

const emit = defineEmits(['register', 'operateSuccess'])
const cancelLoading = ref(false)
const drawerInfo = reactive<any>({
  record: {}
})

const orderColumns = [
  {
    title: '序号',
    align: 'right',
    width: 60,
    dataIndex: 'index'
  },
  {
    title: '订单状态',
    dataIndex: 'orderStatus'
  },
  {
    title: '操作人',
    dataIndex: 'createBy'
  },
  {
    title: '渠道名称',
    dataIndex: 'channelName'
  },
  {
    title: '操作人类型',
    dataIndex: 'orderOperatorType'
  },
  {
    title: '操作内容',
    dataIndex: 'operation'
  },
  {
    title: '操作平台',
    dataIndex: 'operationPlatform'
  },
  {
    title: '操作时间',
    dataIndex: 'createTime'
  }
]

const packageColumns = [
  {
    title: '序号',
    align: 'right',
    width: 60,
    dataIndex: 'index'
  },
  {
    title: '套餐编号',
    dataIndex: 'packageCode'
  },
  {
    title: '套餐名称',
    width: '30%',
    dataIndex: 'packageName'
  },
  {
    title: '服务时长',
    width: '20%',
    dataIndex: 'serviceDuration'
  },
  {
    title: '套餐内容',
    dataIndex: 'goodsName'
  },
  {
    title: '购买数量',
    dataIndex: 'quantity'
  }
]

const [orederRegister, { closeDrawer, changeLoading, changeOkLoading }] = useDrawerInner(async (data) => {
  try {
    changeLoading(true)
    let res = await orderDetail({ orderNo: data.orderNo })
    changeLoading(false)
    drawerInfo.record = res.result || {}
    drawerInfo.record.packageName = data.packageName || ''
    drawerInfo.record.tryFlag = data.tryFlag || ''
  } catch (error) {
    changeLoading(false)
  }
})

const drawerReset = () => {
  changeLoading(false)
}
const cancelOrder = async () => {
  try {
    cancelLoading.value = true
    let res = await orderCancel({
      orderNo: drawerInfo.record.orderNo
    })
    if (res.code == 200) {
      message.success('订单失效成功')
      closeDrawer()
      drawerReset()
      emit('operateSuccess')
    } else {
      message.error(res.message || '订单失效失败')
    }
    cancelLoading.value = false
  } catch (error) {
    cancelLoading.value = false
    changeLoading(false)
  }
}
</script>

<style lang="less" scoped>
.drawer-order {
  padding: 24px;
  color: #192235;
  .order-header {
    margin: 0 16px 30px;
    display: flex;
    align-items: flex-start;
    .header-img {
      width: 280px;
      height: 174px;
      margin-right: 16px;
      flex-shrink: 0;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .header-content {
      padding-top: 16px;
      position: relative;
      overflow: hidden;
      .content-title {
        line-height: 22px;
        font-size: 16px;
        font-weight: 600;
        padding-bottom: 16px;
        border-bottom: 1px solid #e0e1e6;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-break: keep-all;
      }
      :deep(.content-name) {
        padding: 24px 16px 0;
        margin-top: 16px;
        background: #fafafa;
        border-radius: 2px;
        .ant-descriptions-item-label {
          font-size: 12px;
          color: #192236;
          font-weight: 600;
        }
        .ant-descriptions-row > th {
          padding-bottom: 6px;
        }
        .ant-descriptions-row > td {
          padding-bottom: 30px;
        }
      }
      .content-img {
        width: 130px;
        height: 126px;
        position: absolute;
        right: 0;
        top: 0;
        z-index: 5;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .order-detail {
    margin-bottom: 32px;
    :deep(.detail-desc) {
      margin-top: 24px;
      .ant-descriptions-bordered.ant-descriptions-small .ant-descriptions-item-label {
        width: 95px;
        font-weight: 600;
        font-size: 12px;
        color: #555d6f;
      }
    }
    .detail-table {
      margin-top: 24px;
    }
  }
}
</style>
